<template>
	<view class="home">
		<view class="header-wrap">
			<sg-tabbar></sg-tabbar>
			<view class="header">
				header
				<view class="">
					<tabs :list="tabList" :activeIndex="activeIndex" @change='tabsChange'></tabs>
					<view class="">

					</view>
				</view>
			</view>
		</view>
		<swiper class="swiper-content" :current='activeIndex' @change='swiperChange'>
			<swiper-item class="swiper-item" v-for="(item,index) in tabList" :key='index'>
				<component :is="transComponent(index)" v-if="transComponent(index)"></component>
				<view class="" v-else>
					{{item.name}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import importantNews from './modules/importantNews.vue'
	import caiXin from './modules/caiXin.vue'
	import liveBroadcast from './modules/liveBroadcast.vue'
	import tabs from './components/tabs.vue'

	export default {
		components: {
			importantNews,
			caiXin,
			liveBroadcast,
			tabs
		},
		onLoad() {
		},
		data() {
			return {
				tabList: [{
					name: '要闻'
				}, {
					name: '菜芯号'
				}, {
					name: '直播'
				}, {
					name: '视频'
				}, {
					name: '政务'
				}, {
					name: '健康'
				}, {
					name: '融媒'
				}, ],
				activeIndex: 0
			}
		},
		methods: {
			tabsChange(index) {
				this.activeIndex = index
			},
			swiperChange({
				detail
			}) {
				this.activeIndex = detail.current
			},
			transComponent(index) {
				const map = {
					0: 'importantNews',
					1: 'caiXin',
					2: 'liveBroadcast'
				}
				return map[index]
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.home {
		height: 100%;
		display: flex;
		flex-direction: column;

		.header-wrap {
			flex-shrink: 0;
		}

		.swiper-content {
			flex: 1;
		}
	}

	.header {
		background-color: #FFFFFF;
	}
</style>
